import React from "react";
import { Scrollbars } from "react-custom-scrollbars";
import { Menu, Icon } from "antd";
import { withRouter } from "react-router-dom";
import { compose, withHandlers } from "recompose";

const { SubMenu } = Menu;

const MenuList = ({handleClick, history}) => {

  const currentKey = history.location.pathname.split("/")[2] || "sub1-1";

  return (
    <Scrollbars style={{ height: "calc(100vh - 230px)" }} autoHide >
      <Menu
        className="menu-list"
        onClick={handleClick}
        defaultSelectedKeys={[currentKey]}
        defaultOpenKeys={[currentKey.slice(0,4)]}
        mode="inline"
        style={{fontSize: "20px"}}
      >
        <SubMenu
          className="menu-submenu"
          key="sub1"
          title={
            <span>
              <Icon className="level-1" type="account-book" />
              <span className="level-1">个人账单</span>
            </span>
          }
        >
          <Menu.Item key="sub1-1">周支出报告</Menu.Item>
          <Menu.Item key="sub1-2">月度收支统计</Menu.Item>
          <Menu.Item key="sub1-3">年度收支统计</Menu.Item>
        </SubMenu>
        <SubMenu
          className="menu-submenu"
          key="sub2"
          title={
            <span>
              <Icon className="level-1" type="fire" />
              <span className="level-1">娱乐热搜榜</span>
            </span>
          }
        >
          <Menu.Item key="sub2-1">豆瓣热映评分榜</Menu.Item>
          <Menu.Item key="sub2-2">微博热搜榜</Menu.Item>
          <Menu.Item key="sub2-3">网易云音乐热搜榜</Menu.Item>
          {/* <SubMenu className="level-2" key="sub3" title="网易云音乐">
            <Menu.Item key="sub3-1">云音乐-热搜关键词</Menu.Item>
            <Menu.Item key="sub3-2">云音乐-热门听歌类型</Menu.Item>
          </SubMenu> */}
        </SubMenu>
        <SubMenu
          className="menu-submenu"
          key="sub4"
          title={
            <span>
              <Icon className="level-1" type="database" />
              <span className="level-1">国家数据</span>
            </span>
          }
        >
          <Menu.Item key="sub4-1">国内生产总值</Menu.Item>
          <Menu.Item key="sub4-2">国内生产总值指数</Menu.Item>
          <Menu.Item key="sub4-3">平局每天能源消费量</Menu.Item>
          <Menu.Item key="sub4-4">三次产业构成</Menu.Item>
          <Menu.Item key="sub4-5">三次产业贡献率</Menu.Item>
          <Menu.Item key="sub4-6">总人口数</Menu.Item>
          <Menu.Item key="sub4-7">出生/死亡率</Menu.Item>
          <Menu.Item key="sub4-8">劳动力</Menu.Item>
          <Menu.Item key="sub4-9">居民消费水平</Menu.Item>
        </SubMenu>
        <SubMenu
          className="menu-submenu"
          key="sub3"
          title={
            <span>
              <Icon className="level-1" type="bulb" />
              <span className="level-1">其他</span>
            </span>
          }
        >
          <Menu.Item key="sub3-1">HIV模拟</Menu.Item>
          <Menu.Item key="sub3-2">全球新冠病毒最新实时疫情地图</Menu.Item>
        </SubMenu>
      </Menu>
    </Scrollbars>
  );
};
export default compose(
    withRouter,
    withHandlers({
        handleClick: ({history}) => ev => {
            history.push("/main/" + ev.key)
        }
    })
)(MenuList);
